<template>
  <div class="block">
    <el-rate v-model="value1" :disabled="disabled" @change="valueChange"></el-rate>
  </div>
</template>

<script>
export default {
  name: 'fiveStars',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    /** 索引值 用于更新数据 */
    index: Number,
    /** 包含数据源 */
    item: Object,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value1: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(val) {
        this.value1 = Number(val)
      }
    }
  },
  mounted() {
  },
  methods: {
    valueChange(val) {
      const data = {
        index: this.index,
        value: val
      }
      this.$emit('value-change', data)
    }
  }
}
</script>

<style scoped>

</style>
